<template>
<div>
  <el-form ref="form" :model="form"   :inline="false" label-width="140px">
    <el-form-item label="单号" prop="serialNum">
      <el-input  :disabled="true" v-model="form.serialNum"   style="width: 200px"/>
    </el-form-item>
    <el-form-item label="申请人" prop="username">
      <el-input  :disabled="true" v-model="form.username"  style="width: 200px"/>
    </el-form-item>
    <el-form-item label="员工名" prop="staffName">
      <el-input  :disabled="true" v-model="form.staffName"  style="width: 200px"/>
    </el-form-item>
    <el-form-item label="报销项目" prop="matter">
      <el-select disabled v-model="form.matter"  >
        <el-option
          v-for="item in expanseAccountOptions"
          :key="item.dictValue"
          :label="item.dictLabel"
          :value="item.dictValue">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="报销金额" prop="amount">
      <el-input  :disabled="true" v-model="form.amount"   style="width: 200px"/>
    </el-form-item>
    <el-form-item label="申请日期" prop="applicationTime">
      <el-input  :disabled="true" v-model="form.applicationTime"   style="width: 200px"/>
    </el-form-item>
    <el-form-item label="报销凭证" prop="voucher">
      <el-image
        style="width: 100px; height: 100px"
        :src="url+`${form.voucher}`"
        ></el-image>
    </el-form-item>
    <el-form-item label="票据" prop="transferPhoto">
      <el-image
        style="width: 100px; height: 100px"
        :src="url+`${form.transferPhoto}`"
      ></el-image>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input  :disabled="true" v-model="form.remark" placeholder="备注" style="width: 200px"/>
    </el-form-item>


  </el-form>
</div>
</template>

<script>
import {getDicts} from "@/api/system/dict/data";

export default {
  name: "reimburse.vue",
  props:{form:Object},
  data(){
    return{
      expanseAccountOptions:[],

      url:process.env.VUE_APP_BASE_API,
    }
  },
  created() {
    this.getexpenseAccountOptions()
  },
  methods:{
    //报销选项
    async getexpenseAccountOptions(){
      let res=await getDicts('expense_account_type')
      this.expanseAccountOptions=res.data
    },
  }

}
</script>

<style scoped>

</style>
